<template>
	<view class="">
		<view class="content">
			<view class="form-group">
				<view class="title">设置备注</view>
				<textarea name="remark" v-model="remark" id="remark" cols="15" rows="3" class="remark" maxlength="20" :placeholder="userInfo.nickname"></textarea>
			</view>
		</view>
		<view class="footer">
			<view style="text-align: center;width: 100%;">
				<u-button @click="sendAddFriend" type="success" size="medium" :custom-style="customStyle" style="height: 90rpx;background-color: #00c753;color: #fff;font-size: 16px;">完成</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { api } from '../../api/api';
import { myRequest } from '../../util/api';

	export default {
		data() {
			return {
				userInfo: {},
				customStyle: {
					width: '180px'
				},
				remark: '',
			}
		},
		onLoad(option) {
			this.userInfo = {
				other_id: option.other_id,
				nickname: option.nickname,
			};
		},
		methods: {
			async sendAddFriend() {
				uni.showLoading({
					title: '正在添加联系人...',
					mask: true
				});
				const other_id = this.userInfo.other_id;
				const remark = this.remark;
				
				// 请求搜索好友接口
				await myRequest({
					url: api.agreeNewFriend,
					method: 'POST',
					data: {
						other_id: other_id,
						remark: remark,
					},
					success: (res) => {
						if (res.data.code == 200 && res.data.httpCode == 200){
							//关闭页面跳转至前两个页面
							uni.navigateBack({
								delta: 2,
							});
						}
						uni.hideLoading();
					},
					
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 20px;
	}
	.form-group {
		margin-bottom: 10px;
	}
	.title {
		padding-left: 20px;
		color: #797979;
		font-size: 26rpx;
	}
	.remark {
		background-color: #efefef;
		width: 100%;
		border-radius: 18rpx;
		margin: 10px 0;
		height: 100rpx;
		padding: 30rpx;
		font-size: 32rpx;
		box-sizing: border-box;
	}
	.footer{
		// background-color: #fff;
		position: absolute;
		bottom: 0;
		padding: 10px 14px;
		padding-bottom: 100rpx;
		width: 100%;
	}
</style>
